<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人在线OJ系统</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            /* font-family: "楷体"; */
        }
        body
        {
            font-family: '楷体', 'KaiTi', cursive;
        }
        header
        {
            /*宇宙*/
           /* background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://ts1.cn.mm.bing.net/th/id/R-C.c97c0865b3849b24a5f3ce808bda3c01?rik=Y97RiJDhUCuJOQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f5%2f205.jpg&ehk=54hD73yCjVb%2faJbQvcg8SW2V1AdIbghKw78o41P02vs%3d&risl=&pid=ImgRaw&r=0);
            
           */ background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://ts1.cn.mm.bing.net/th/id/R-C.c94a0861fdc90cbac8e741d79fde61b1?rik=wVE9eIQbt98vbQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbpic%2f42%2f3942.jpg&ehk=n6AHFfBNktKWKky2%2fNqf066DK0UMetqG%2f7k9iLrI1Ak%3d&risl=&pid=ImgRaw&r=0); 
            /* 小马宝莉 */
            /* background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://ts1.cn.mm.bing.net/th/id/R-C.bab3a5688d4f79b6bb39f86b275b1b2d?rik=U8QrWvKxSD7lFw&riu=http%3a%2f%2fimages.jumeinet.com%2fwordhtml_20190718124126_83712.jpeg&ehk=XxlYobTXYgfdWsa7WTc3vc30SNC2SUjrikwk%2bDNh9hs%3d&risl=&pid=ImgRaw&r=0); */
            height: 100vh;
            background-size: cover;
        }
    
        ul{
            float: right;
            list-style-type: none;
            margin: 15px;
        }
        ul li{
            display: inline-block;
        }
    
        ul li a{
            text-decoration: none;
            color: #fff;
            padding: 5px 20px;
            border: 1px solid transparent;
            transition: .6s ease;
            border-radius: 20px;
        }
    
        ul li a:hover{
            background-color: #fff;
            color: #000;
        }
        ul li.active a{
            background-color: #fff;
            color: #000;
        }
        .title{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .title h1{
            color: #fff;
            font-size: 70px;
            font-family: Century Gothic;
        }
    </style>
</head>
<body>
    <header>
        <div class="main">
            <ul>
                <li class="active"><a href="#">首页</a></li>
                <li><a href="./questions" target="_blank">题库</a></li>
                <li><a href="https://gitee.com/wang-youdongs-code-path" target="_blank"><span style="color: crimson;">个人</span>码云</a></li>
                <li><a href="https://blog.csdn.net/2302_76941579?type=blog" target="_blank"><span style="color: crimson;">个人</span>博客</a></li>
                <li><a href="https://legacy.cplusplus.com/" target="_blank"><span style="color: crimson;">C++</span>使用手册</a></li>
                <li><a href="https://chat.deepseek.com/" target="_blank"><span style="color: crimson;">Chatgpt</span>问答</a></li>
        </div>
        <div class="title">
            <h1 style="font-family: 楷体, KaiTi, cursive;"><span style="color: crimson;">个人</span>在线OJ系统</h1>
        </div>
    </header>
</body>
</html>



         -->
<!-- 
         <!DOCTYPE html>
         <html lang="zh-CN">
         <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>未来OJ平台</title>
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
             <style>
                 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
         
                 * {
                     margin: 0;
                     padding: 0;
                     box-sizing: border-box;
                 }
         
                 body {
                     font-family: 'Orbitron', sans-serif;
                     background: radial-gradient(circle at center, #1a1a2e, #0f0f1a);
                     color: #e0e0e0;
                     overflow-x: hidden;
                     min-height: 100vh;
                     position: relative;
                 }
         
                 /* 背景粒子效果 */
                 #particles {
                     position: fixed;
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 100%;
                     pointer-events: none;
                     z-index: -1;
                     background: url('https://via.placeholder.com/1920x1080?text=Tech+Background') no-repeat center/cover;
                     opacity: 0.1;
                 }
         
                 /* 导航栏 */
                 header {
                     position: fixed;
                     top: 0;
                     width: 100%;
                     padding: 20px 0;
                     background: rgba(10, 10, 20, 0.8);
                     backdrop-filter: blur(10px);
                     z-index: 1000;
                     box-shadow: 0 2px 15px rgba(0, 255, 255, 0.2);
                 }
         
                 nav {
                     max-width: 1200px;
                     margin: 0 auto;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                     padding: 0 30px;
                 }
         
                 .logo {
                     font-size: 28px;
                     color: #00ffff;
                     text-shadow: 0 0 10px #00ffff;
                 }
         
                 .nav-links {
                     display: flex;
                     gap: 30px;
                     list-style: none;
                 }
         
                 .nav-links a {
                     color: #e0e0e0;
                     text-decoration: none;
                     font-size: 16px;
                     padding: 8px 20px;
                     border-radius: 25px;
                     transition: all 0.3s ease;
                     position: relative;
                 }
         
                 .nav-links a:hover {
                     color: #00ffff;
                     background: rgba(0, 255, 255, 0.1);
                     box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
                 }
         
                 .nav-links a::after {
                     content: '';
                     position: absolute;
                     width: 0;
                     height: 2px;
                     bottom: 0;
                     left: 50%;
                     background: #00ffff;
                     transition: all 0.3s ease;
                 }
         
                 .nav-links a:hover::after {
                     width: 100%;
                     left: 0;
                 }
         
                 /* 英雄区 */
                 .hero {
                     height: 100vh;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     text-align: center;
                     position: relative;
                     overflow: hidden;
                 }
         
                 .hero-content {
                     z-index: 2;
                     animation: fadeInUp 1s ease-out;
                 }
         
                 @keyframes fadeInUp {
                     from { opacity: 0; transform: translateY(50px); }
                     to { opacity: 1; transform: translateY(0); }
                 }
         
                 .hero h1 {
                     font-size: 80px;
                     color: #00ffff;
                     text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
                     margin-bottom: 20px;
                 }
         
                 .hero p {
                     font-size: 24px;
                     color: #b0b0b0;
                     margin-bottom: 40px;
                 }
         
                 .cta-btn {
                     padding: 15px 50px;
                     font-size: 20px;
                     color: #0f0f1a;
                     background: linear-gradient(135deg, #00ffff, #ff00ff);
                     border: none;
                     border-radius: 50px;
                     text-decoration: none;
                     box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
                     transition: all 0.3s ease;
                 }
         
                 .cta-btn:hover {
                     transform: scale(1.1);
                     box-shadow: 0 0 30px rgba(0, 255, 255, 1);
                 }
         
                 /* 功能区 */
                 .features {
                     padding: 100px 0;
                     max-width: 1200px;
                     margin: 0 auto;
                     text-align: center;
                 }
         
                 .features h2 {
                     font-size: 48px;
                     color: #00ffff;
                     text-shadow: 0 0 15px #00ffff;
                     margin-bottom: 60px;
                 }
         
                 .feature-grid {
                     display: grid;
                     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                     gap: 40px;
                     padding: 0 30px;
                 }
         
                 .feature-card {
                     background: rgba(20, 20, 40, 0.9);
                     padding: 40px;
                     border-radius: 20px;
                     box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
                     transition: all 0.3s ease;
                     position: relative;
                     overflow: hidden;
                 }
         
                 .feature-card::before {
                     content: '';
                     position: absolute;
                     top: -50%;
                     left: -50%;
                     width: 200%;
                     height: 200%;
                     background: radial-gradient(circle, rgba(0, 255, 255, 0.1), transparent);
                     opacity: 0;
                     transition: opacity 0.3s ease;
                 }
         
                 .feature-card:hover::before {
                     opacity: 1;
                 }
         
                 .feature-card:hover {
                     transform: translateY(-15px);
                     box-shadow: 0 0 35px rgba(0, 255, 255, 0.5);
                 }
         
                 .feature-card i {
                     font-size: 60px;
                     color: #00ffff;
                     margin-bottom: 20px;
                     text-shadow: 0 0 10px #00ffff;
                 }
         
                 .feature-card h3 {
                     font-size: 28px;
                     margin-bottom: 15px;
                 }
         
                 .feature-card p {
                     color: #b0b0b0;
                 }
         
                 /* 页脚 */
                 footer {
                     padding: 30px 0;
                     background: rgba(10, 10, 20, 0.9);
                     text-align: center;
                     border-top: 1px solid #00ffff;
                 }
         
                 footer p {
                     font-size: 14px;
                     color: #b0b0b0;
                 }
         
                 @media (max-width: 768px) {
                     .hero h1 { font-size: 50px; }
                     .hero p { font-size: 18px; }
                     .nav-links { flex-direction: column; gap: 15px; padding: 20px; }
                     .features h2 { font-size: 36px; }
                 }
             </style>
         </head>
         <body>
             <div id="particles"></div>
             <header>
                 <nav>
                     <div class="logo">Future OJ</div>
                     <ul class="nav-links">
                         <li><a href="./index.html">首页</a></li>
                         <li><a href="./questions">题库</a></li>
                         <li><a href="#">排行榜</a></li>
                         <li><a href="https://chat.deepseek.com/">AI辅助</a></li>
                     </ul>
                 </nav>
             </header>
         
             <section class="hero">
                 <div class="hero-content">
                     <h1>未来OJ平台</h1>
                     <p>探索编程的无限可能</p>
                     <a href="#" class="cta-btn">立即开始</a>
                 </div>
             </section>
         
             <section class="features">
                 <h2>核心功能</h2>
                 <div class="feature-grid">
                     <div class="feature-card">
                         <i class="fas fa-code"></i>
                         <h3>智能题库</h3>
                         <p>动态更新的题目，覆盖多种语言和难度。</p>
                     </div>
                     <div class="feature-card">
                         <i class="fas fa-bolt"></i>
                         <h3>即时评测</h3>
                         <p>实时反馈你的代码运行结果。</p>
                     </div>
                     <div class="feature-card">
                         <i class="fas fa-trophy"></i>
                         <h3>全球竞技</h3>
                         <p>与顶尖程序员一决高下。</p>
                     </div>
                 </div>
             </section>
         
             <footer>
                 <p>© 2023 未来OJ平台. All Rights Reserved.</p>
             </footer>
         </body>
         </html> -->

         <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园OJ</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Orbitron', sans-serif;
            background: #0d0d1a;
            color: #fff;
            overflow-x: hidden;
            cursor: none;
        }

        /* 自定义光标 */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, #ff00ff, transparent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.1s ease;
        }

        /* 背景 */
        #background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #0d0d1a, #1a1a3d);
            z-index: -1;
            animation: pulse 15s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }

        /* 侧边导航栏 */
        .sidebar {
            position: fixed;
            top: 0;
            left: -250px;
            width: 250px;
            height: 100%;
            background: rgba(20, 20, 40, 0.95);
            padding: 40px 20px;
            transition: left 0.5s ease;
            z-index: 1000;
            box-shadow: 2px 0 20px rgba(255, 0, 255, 0.3);
        }

        .sidebar.active {
            left: 0;
        }

        .menu-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            font-size: 30px;
            color: #ff00ff;
            cursor: pointer;
            z-index: 1001;
            text-shadow: 0 0 10px #ff00ff;
        }

        .sidebar .logo {
            font-size: 28px;
            color: #00ffcc;
            text-shadow: 0 0 15px #00ffcc;
            margin-bottom: 40px;
        }

        .sidebar ul {
            list-style: none;
        }

        .sidebar ul li {
            margin: 20px 0;
        }

        .sidebar ul li a {
            color: #e0e0e0;
            text-decoration: none;
            font-size: 18px;
            padding: 10px;
            display: block;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .sidebar ul li a:hover {
            background: linear-gradient(90deg, #ff00ff, #00ffcc);
            color: #0d0d1a;
            box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
        }

        /* 英雄区 */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }

        .cube-container {
            position: absolute;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            animation: rotateCube 20s infinite linear;
        }

        @keyframes rotateCube {
            0% { transform: rotateX(0deg) rotateY(0deg); }
            100% { transform: rotateX(360deg) rotateY(360deg); }
        }

        .cube {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(255, 0, 255, 0.2);
            border: 2px solid #00ffcc;
            box-shadow: 0 0 20px #00ffcc;
            opacity: 0.8;
        }

        .front  { transform: translateZ(100px); }
        .back   { transform: translateZ(-100px) rotateY(180deg); }
        .right  { transform: rotateY(90deg) translateZ(100px); }
        .left   { transform: rotateY(-90deg) translateZ(100px); }
        .top    { transform: rotateX(90deg) translateZ(100px); }
        .bottom { transform: rotateX(-90deg) translateZ(100px); }

        .hero-content {
            z-index: 2;
        }

        .hero h1 {
            font-size: 70px;
            background: linear-gradient(45deg, #ff00ff, #00ffcc);
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: 0 0 20px #ff00ff;
        }

        .hero p {
            font-family: 'Roboto Mono', monospace;
            font-size: 22px;
            color: #e0e0e0;
            margin: 20px 0 40px;
        }

        .pulse-btn {
            padding: 15px 40px;
            font-size: 20px;
            background: transparent;
            border: 2px solid #ff00ff;
            color: #ff00ff;
            border-radius: 50px;
            cursor: pointer;
            animation: pulseBtn 2s infinite;
            transition: all 0.3s ease;
        }

        @keyframes pulseBtn {
            0% { box-shadow: 0 0 10px #ff00ff; }
            50% { box-shadow: 0 0 30px #ff00ff; }
            100% { box-shadow: 0 0 10px #ff00ff; }
        }

        .pulse-btn:hover {
            background: #ff00ff;
            color: #0d0d1a;
            transform: scale(1.1);
        }

        /* 功能区 */
        .features {
            padding: 100px 30px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .features h2 {
            font-size: 50px;
            text-align: center;
            background: linear-gradient(45deg, #00ffcc, #ff00ff);
            -webkit-background-clip: text;
            color: transparent;
            margin-bottom: 60px;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .feature-card {
            background: linear-gradient(135deg, rgba(20, 20, 40, 0.9), rgba(40, 20, 40, 0.9));
            padding: 30px;
            border-radius: 15px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 0 40px rgba(255, 0, 255, 0.5);
        }

        .feature-card i {
            font-size: 50px;
            color: #00ffcc;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 26px;
            margin-bottom: 15px;
        }

        .feature-card p {
            font-family: 'Roboto Mono', monospace;
            color: #d0d0d0;
        }

        /* 背景音乐控制 */
        .music-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 24px;
            color: #00ffcc;
            cursor: pointer;
            z-index: 1000;
            text-shadow: 0 0 10px #00ffcc;
        }

        @media (max-width: 768px) {
            .hero h1 { font-size: 40px; }
            .hero p { font-size: 16px; }
            .cube-container { width: 150px; height: 150px; }
            .cube div { width: 150px; height: 150px; }
            .features h2 { font-size: 36px; }
        }
    </style>
</head>
<body>
    <div id="background"></div>
    <div class="cursor" id="cursor"></div>

    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="logo">校园OJ</div>
        <ul>
            <li><a href="./index.html">首页</a></li>
            <li><a href="./questions">题库</a></li>
            <li><a href="#">社区</a></li>
            <li><a href="https://chat.deepseek.com/">AI辅助</a></li>
            <li><a href="https://blog.csdn.net/2302_76941579?type=collect">联系作者</a></li>
        </ul>
    </div>
    <div class="menu-btn" id="menuBtn"><i class="fas fa-bars"></i></div>

    <!-- 英雄区 -->
    <section class="hero">
        <div class="cube-container">
            <div class="cube">
                <div class="front"></div>
                <div class="back"></div>
                <div class="right"></div>
                <div class="left"></div>
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
        </div>
        <div class="hero-content">
            <h1>校园OJ平台</h1>
            <p>开启你的编程冒险之旅</p>
            <!-- <button class="pulse-btn">立即加入</button> -->
            <a href="./questions" class="pulse-btn">立即加入</a>  
        </div>
    </section>

    <!-- 功能区 -->
    <section class="features">
        <h2>探索核心功能</h2>
        <div class="feature-grid">
            <div class="feature-card">
                <i class="fas fa-code"></i>
                <h3>创意题库</h3>
                <p>挑战多样化的编程任务</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-rocket"></i>
                <h3>超快评测</h3>
                <p>毫秒级反馈，优化你的代码体验</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-users"></i>
                <h3>社区互动</h3>
                <p>与全球开发者交流，共同成长</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-trophy"></i>
                <h3>竞技排名</h3>
                <p>登顶排行榜，证明你的实力</p>
            </div>
        </div>
    </section>

    <!-- 音乐控制 -->
    <div class="music-toggle" id="musicToggle"><i class="fas fa-volume-up"></i></div>

    <script>
        // 侧边栏切换
        const menuBtn = document.getElementById('menuBtn');
        const sidebar = document.getElementById('sidebar');
        menuBtn.addEventListener('click', () => {
            sidebar.classList.toggle('active');
        });

        // 自定义光标
        const cursor = document.getElementById('cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX - 10 + 'px';
            cursor.style.top = e.clientY - 10 + 'px';
        });

        // 音乐开关（示例功能，实际需添加音频）
        const musicToggle = document.getElementById('musicToggle');
        let isPlaying = false;
        musicToggle.addEventListener('click', () => {
            isPlaying = !isPlaying;
            musicToggle.innerHTML = `<i class="fas fa-volume-${isPlaying ? 'up' : 'mute'}"></i>`;
            // 这里可以添加音频播放逻辑
        });
    </script>
</body>
</html>